<template>
  <!--  发货区域，支持选择快递-->
  <a-modal
    :width="800"
    :title="title"
    :visible="visible"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk" type="primary" v-if="!disableSubmit">确认</a-button>
    </template>
    <a-form :form="form">
      <a-row :gutter="8">
        <!--        承运方式-->
        <a-col :md="24" :sm="24">
          <a-form-item
            :labelCol="{ xs: { span: 24 },sm: { span: 3 }}"
            :wrapperCol="{xs: { span: 24 },sm: { span: 21 }}"
            label="价格类型"
          >
            <a-radio-group buttonStyle="solid" v-model="changeNumber" @change="pricChange">
              <a-radio-button :value="4">物料单价</a-radio-button>
              <a-radio-button :value="1">经销商价</a-radio-button>
              <a-radio-button :value="2">价格组</a-radio-button>
              <a-radio-button :value="3">部门价</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="物料编号"
          >
            <a-input-search placeholder="请选择物料" v-decorator="['materialCode',validatorRules.materialCode]"
                            readOnly :disabled="disableSubmits" enter-button @search="productSearch('materialCode')" />
            <a-input readOnly type="hidden" v-decorator="['umrez']" />
            <a-input readOnly type="hidden" v-decorator="['umren']" />
          </a-form-item>

        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="物料名称"
            hasFeedback
          >
            <a-input placeholder="请选择物料" :disabled="true"
                     v-decorator="['materialName',validatorRules.materialName]"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" v-if="custPrice">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="经销商名称"
          >
            <a-input-search v-decorator="['custName']" placeholder="请选择经销商名称"
                            readOnly :disabled="disableSubmits" enter-button @search="custSearch('custname')" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" v-if="custPrice">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="经销商编号"
            hasFeedback
          >
            <a-input :disabled="true" placeholder="请选择经销商名称"
                     v-decorator="['custCode']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" v-if="orgPrice">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="部门"
            hasFeedback
          >
            <a-input-search v-decorator="['departCode']" placeholder="请选择经销商名称"
                            readOnly :disabled="disableSubmits" enter-button @search="custSearch('terminal')" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" v-if="orgPrice">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="部门名称"
            hasFeedback
          >
            <a-input placeholder="请选择经销商名称" :disabled="true"
                     v-decorator="['departName']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" v-if="orgPrice">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="定价"
            hasFeedback
          >
            <a-input placeholder="请输入" type="price" :disabled="disableSubmit" @change="e => priceCh(e)"
                     v-decorator="['price',validatorRules.price]"></a-input>
          </a-form-item>
        </a-col>

        <a-col :md="12" :sm="24" v-if="orgPriceCount">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="价格"
            hasFeedback
          >
            <a-input placeholder="请输入" type="number" :disabled="disableSubmit" @change="e => priceCh(e)"
                     v-decorator="['price',validatorRules.price]"></a-input>
          </a-form-item>
        </a-col>

        <a-col :md="12" :sm="24" v-if="orgPriceCount">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="价格数量"
            hasFeedback>
            <a-input placeholder="请输入价格数量" v-decorator="['kpein', validatorRules.kpein]" />
          </a-form-item>
        </a-col>

        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="单位数量"
            hasFeedback>
            <a-input placeholder="请输入单位数量" v-decorator="['umren', validatorRules.umren]" />
          </a-form-item>
        </a-col>

        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="单位系数"
            hasFeedback>
            <a-input placeholder="请输入单位系数" v-decorator="['umrez', validatorRules.umrez]" />
          </a-form-item>
        </a-col>

        <a-col :md="12" :sm="24" v-if="prices">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="价格组"
            hasFeedback>
            <cn-dict-select-tag :options="{value:'dictDataCode',label:'dictDataDesc'}" :triggerChange="true"
                               dictCode="price_group"
                               :disabled="disableSubmit" v-decorator.trim="['priceGroup', validatorRules.priceGroup]"
                               @change="priceGropC"
                               placeholder="请选择价格组项" />
          </a-form-item>
        </a-col>

        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="kappl"
            hasFeedback>
            <a-input placeholder="请输入" v-decorator="['kappl', validatorRules.kappl]" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="定价条件"
            hasFeedback>
            <a-input placeholder="请输入定价条件" v-decorator="['kschl', validatorRules.kschl]" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="币种"
            hasFeedback
          >
            <cn-dict-select-tag :options="{value:'dictDataCode',label:'dictDataDesc'}" :triggerChange="true"
                               dictCode="currency"
                               :disabled="disableSubmit" v-decorator.trim="['konwa', validatorRules.konwa]"
                               placeholder="请选择币种" />
          </a-form-item>
        </a-col>

        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="开始时间"
            hasFeedback
          >
            <!--            :disabled-date="disabledDate-->
            <a-date-picker style="width: 100%" format="YYYY-MM-DD" showTime valueFormat="YYYY-MM-DD"
                           :disabled="disableSubmit" v-decorator="['startTime', validatorRules.startTime]"
                           placeholder="点击选择开始时间" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="{
        xs: { span: 24 },
        sm: { span: 18 }
      }"
            label="结束时间"
            hasFeedback
          >
            <a-date-picker style="width: 100%" format="YYYY-MM-DD" showTime valueFormat="YYYY-MM-DD"
                           :disabled="disableSubmit" v-decorator="[ 'endTime',validatorRules.endTime]"
                           placeholder="点击选择结束时间" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="价格单位"
            hasFeedback
          >
            <cn-dict-select-tag :options="{value:'dictDataCode',label:'dictDataDesc'}" :triggerChange="true"
                               dictCode="product_saleUnit"
                               :disabled="disableSubmit"
                               v-decorator.trim="['priceUnitName', validatorRules.priceUnitName]"
                               placeholder="请选择价格单位" />
          </a-form-item>
        </a-col>

        <!--        <a-col :md="12" :sm="24">-->
        <!--          <a-form-item-->
        <!--            :labelCol="labelCol"-->
        <!--            :wrapperCol="wrapperCol"-->
        <!--            label="erp凭证码"-->
        <!--            hasFeedback-->
        <!--          >-->
        <!--            <a-input placeholder="请输入erp凭证码" :disabled='disableSubmit'-->
        <!--                     v-decorator="['erpKey',validatorRules.erpKey]"></a-input>-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
      </a-row>
    </a-form>
    <proChose ref="prochoose" v-bind="modalProps" @okbro="okbropro"></proChose>
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import proChose from '@comp/cn-components/ProChose'
import { pick } from 'lodash'

export default {
  name: 'priceAdd',
  components: {
    proChose
  },
  data() {
    return {
      value: '',
      disableSubmit: false,
      disableSubmits: false,
      title: '',
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      url: {
        // kuaidi: window._CONFIG['domianOrderURL'] + '/cnDictionaryTypeController/getDictionaryTypeList'
        sendOrder: window._CONFIG['domianURL'] + '/price/saveOrUpdate'
      },
      validatorRules: {
        productCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
        productName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        custCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
        custName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        channelCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
        price: {
          rules: [
            { required: true, message: '' }
          ]
        },
        startTime: {
          rules: [
            { required: true, message: '' }
          ]
        },
        endTime: {
          rules: [
            { required: true, message: '' }
          ]
        },
        konwa: {
          rules: [
            { required: true, message: '' }
          ]
        },
        unitName: {
          rules: [
            { required: true, message: '' }
          ]
        }
      },
      modal: undefined,
      custPrice: false,
      prices: false,
      orgPrice: false,
      orgPriceCount: true,
      name: '',
      changeNumber: 4
    }
  },
  watch: {
    changeNumber: {
      immediate: true,
      handler(val) {
        switch (val) {
          case 4:
            this.custPrice = false
            this.prices = false
            this.orgPrice = false
            this.orgPriceCount = true
            break
          case 1:
            this.custPrice = true
            this.prices = false
            this.orgPrice = false
            this.orgPriceCount = true
            break
          case 2:
            this.custPrice = false
            this.prices = true
            this.orgPrice = false
            this.orgPriceCount = true
            break
          case 3:
            this.custPrice = false
            this.prices = false
            this.orgPrice = true
            this.orgPriceCount = false
            break
        }
      }
    }
  },
  methods: {
    pricChange(e) {
      let value = this.changeNumber
      this.form.resetFields()
    },
    priceGropC(e1, e2) {
      console.log(e1)
      console.log(e2)
    },
    priceCh(e) {
      console.log(e.target.value)
      let num = e.target.value
      if (num < 0) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            price: 0
          })
        })
      }
    },
    custSearch(status) {
      if (status == 'custname') {
        this.$refs.prochoose.rowKey = 'custCode'
        let formconfig = [
          {
            key: 'custCode',
            label: '经销商编号'
          },
          {
            key: 'custName',
            label: '经销商名称'
          }
        ]
        let tableconfig = {
          columns: [
            {
              title: '经销商编号',
              align: 'center',
              dataIndex: 'custCode',
              width: 120,
              ellipsis: true
            },
            {
              title: '经销商名称',
              align: 'center',
              dataIndex: 'custName',
              width: 120,
              ellipsis: true
            }
          ],

          list: window._CONFIG['domianURL'] + '/customerController/getPageList',
          multiple: false,
          columW: 12
        }
        let dataSource = []
        if (this.form.getFieldValue('custCode')) {
          dataSource = [{
            custCode: this.form.getFieldValue('custCode'),
            custName: this.form.getFieldValue('custName')
          }]
        }
        this.name = '经销商'
        this.$refs.prochoose.edit(formconfig, tableconfig, status)
      } else if (status == 'terminal') {
        this.$refs.prochoose.rowKey = 'orgCode'
        let formconfig = [
          {
            key: 'orgCode',
            label: '组织编号'
          },
          {
            key: 'orgName',
            label: '组织名称'
          }
        ]
        let tableconfig = {
          columns: [
            {
              title: '组织编号',
              align: 'center',
              dataIndex: 'orgCode',
              width: 120,
              ellipsis: true
            },
            {
              title: '组织名称',
              align: 'center',
              dataIndex: 'orgName',
              width: 120,
              ellipsis: true
            }
          ],

          list: window._CONFIG['domianURL'] + '/cnOrgController/findTreeList',
          multiple: false,
          columW: 12
        }
        this.name = '部门'
        this.$refs.prochoose.edit(formconfig, tableconfig, status)
      }

    },
    productSearch(status) {
      this.$refs.prochoose.rowKey = 'materialCode'
      let formconfig = [
        {
          key: 'materialCode',
          label: '物料编号'
        },
        {
          key: 'materialName',
          label: '物料名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '物料编号',
            align: 'left',
            dataIndex: 'materialCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '物料名称',
            align: 'left',
            dataIndex: 'materialName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/material/findPageListSave',
        multiple: false,
        columW: 12
      }

      this.name = '物料'
      let dataSource = []
      if (this.form.getFieldValue('materialCode')) {
        dataSource = [{
          materialCode: this.form.getFieldValue('materialCode'),
          umren: this.form.getFieldValue('umren'),
          umrez: this.form.getFieldValue('umrez'),
          materialName: this.form.getFieldValue('materialName')
        }]
      }
      this.$refs.prochoose.edit(formconfig, tableconfig, 'materialCode', 'materialName', dataSource)
    },
    okbropro(record, status, status2) {
      let res = record[0]
      if (status == 'materialCode') {
        console.log(res)
        this.$nextTick(() => {
          this.form.setFieldsValue(
            {
              umren: res.umren,
              materialName: res.materialName,
              materialCode: res.materialCode,
              umrez: res.umrez
            }
          )
        })

        console.log(this.form.getFieldValue('umrez'))
      } else if (status == 'terminal') {
        this.form.setFieldsValue({
          departCode: res.orgCode,
          departName: res.orgName
        })
      } else {
        this.form.setFieldsValue(pick(res, 'custCode', 'custName', 'channelCode', 'channelName'))
        console.log(this.form.getFieldValue('channelName'))
      }

    },
    add(record, status) {
      this.edit(record, status)
    },
    edit(iscord) {
      this.disableSubmits = false
      this.form.resetFields()
      this.modal = undefined
      this.visible = true
      if (typeof iscord !== 'undefined') {
        this.disableSubmits = true
        this.changeNumber = iscord.priceMaterial-0
        this.modal = Object.assign({}, iscord)
        this.$nextTick(() => {
          this.form.setFieldsValue({ ...this.modal })
        })
      }
    },
    handleOk() {
      let _vm = this
      this.form.validateFields((err, values) => {
        console.log(this.form.setFieldsValue)
        if (!err) {
          this.confirmLoading = true
          this.modal == undefined ? console.log('新增提交') : values.id = this.modal.id
          values.priceMaterial = this.changeNumber
          values.maktx =values.materialName
          values.matnr =values.materialCode
          postAction(this.url.sendOrder, values).then(res => {
            if (!res.success) {
              this.$message.error(res.message)
            } else {
              this.$emit('ok')
            }
            _vm.confirmLoading = false
          })
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.confirmLoading = false
    },
    close() {
      this.handleCancel()
    }
  },
  computed: {
    modalProps() {
      return {
        name: this.name
      }
    }
  }

}
</script>

<style scoped>

</style>